<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<jsp:include page="/web/inc/header"/>



<section>
<div class="wrap">
  <div id="seach">
    <div id="logo"><a href="http://fenlicx.qinglab.cn" title="垃圾分类查询">分类查询</a></div>
    <div class="seach">
        <form method="post" action="<%=path%>/web/article/solrsearch" id="toSolrSearch">
            <input type="text" name="solrsearch" class="seach_txt" id="seach2">
            <input type="button" class="seach_bun" name="button" id="button" value="查询分类">
        </form>
    </div>
  </div>


<article class="article">
    <%--这里写选择类别、材质start--%>
    <div>
        垃圾类型：
        <div style="width:700px;line-height: 35px;">

            <c:forEach items="${requestScope.garbageTypes}" var="g">
                <div data-id="${g.id}" class="garbageType" onclick="searchByType(this)" style="cursor:pointer;border:1px solid darkgrey;float: left;width: 20%;font-size: 15px;border-radius: 40px;text-align: center;margin-left: 20px;margin-top: 10px;" >
                        ${g.title}
                </div>
            </c:forEach>
        </div>

    </div>
    <div style="margin-top: 15px;">
        垃圾材质：
        <%--<jsp:include page="/web/article/textureData"></jsp:include>--%>
        <div style="width:700px;line-height: 35px;overflow: auto">
            <c:forEach items="${requestScope.textures}" var="t">
                <div data-id="${t.id}" data-name="${t.title}" class="garbageTexture" onclick="searchByTexture(this)" style="cursor:pointer;border:1px solid darkgrey;float: left;width: 20%;font-size: 15px;border-radius: 40px;text-align: center;margin-left: 20px;margin-top: 10px;" >
                        ${t.title}
                </div>
            </c:forEach>
        </div>
    </div>
    <div style="margin-top: 15px;">
        <div style="width:700px;line-height: 35px;overflow: auto" class="childrenTextures">

        </div>
    </div>
    <%--这里写选择类别、材质end--%>


  <div class="title">
    <h1>分类回收技术文章</h1>
    <a href="javascript:void(0);" class="orderby" onclick="orderByCondition(this)"  data-id="bydefault">默认排序</a>
    <a href="javascript:void(0);" class="orderby" onclick="orderByCondition(this)"  data-id="bytime">时间排序</a>
    <a href="javascript:void(0);" class="orderby" onclick="orderByCondition(this)"  data-id="byhot">热度排序</a>
    <a href="javascript:void(0);" class="orderby" onclick="orderByCondition(this)"  data-id="bylove">喜爱度排序</a>
    <a class="bun" href="<%=path%>/web/article/toWriteArticle">
        发布文章
    </a>
  </div>

  <div class="articleListData">

  </div>

        <script src="<%=path%>/static/js/layui/layui.all.js"></script>
        <script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
        <script>
            var typeId = null;
            var textId = null;
            var orderBy = null;
            var pageNum = null;
            var textName="";
            $(function () {
                //页面加载完成，ajax查出所有文章
                $.get("<%=path%>/web/article/articleListData",
                    function(data){
                        $(".articleListData").html(data);
                    });


                //点击搜索按钮，根据文章名搜索文章
                $(".seach_bun").click(function () {
                    if($(".seach_txt").val().trim().length<1){
                        layer.msg("查询内容不能为空",{icon:5});
                        return;
                    }
                    $("#toSolrSearch").submit();
                })

            })


            //ajax方法
            function toAjax() {
                $.ajax({
                    url:"<%=path%>/web/article/articleListData",
                    async:false,
                    data:{typeId:typeId,textId:textId,orderBy:orderBy,pageNum:pageNum},
                    type:"GET",
                    success:function (data) {
                        $(".articleListData").html(data);
                    }
                })
            }


            //获取子类材质
            function toGetChildrenTexture() {
                $.ajax({
                    url:"<%=path%>/web/texture/childrenTextures",
                    //async:false,
                    data:{textId:textId,textName:textName},
                    type:"GET",
                    success:function (data) {
                        $(".childrenTextures").html(data);
                    }
                })
            }


            //通过垃圾类型搜索文章
            function searchByType(obj){
                $(".garbageType").css("background-color","");//颜色全部变为无色
                $(obj).css("background-color","#7CFC00");//点击的变色
                typeId = $(obj).data("id");
                pageNum=1;
                toAjax();
            }

            //通过垃圾材质搜索文章
            function searchByTexture(obj){
                $(".garbageTexture").css("background-color","");//颜色全部变为无色
                $(obj).css("background-color","#FFFACD");//点击的变色
                textId = $(obj).data("id");
                textName = $(obj).data("name");
                pageNum=1;
                toAjax();
                toGetChildrenTexture();
            }

            //时间排序
            function orderByCondition(obj) {
                $(".orderby").css("font-weight","");
                $(obj).css("font-weight","900");//点击字体变粗
                orderBy = $(obj).data("id");
                pageNum=1;
                toAjax();
            }


        </script>


</article>
</div>
</section>



<jsp:include page="/web/inc/footer"/>
